<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">中医体质辨别</text>
    </view>
    <view class="login-form-content">
		
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入姓名" maxlength="30" />
      </view>
	  
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
	  
      <!-- <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
      </view> -->
	  
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.id_card" class="input" type="id_card" placeholder="请输入身份证号" maxlength="30" />
	  </view>
	  
	<!--  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.email" class="input" type="email" placeholder="请输入email账号" maxlength="30" />
	  </view> -->
	  
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.mobile" class="input" type="mobile" placeholder="请输入电话" maxlength="30" />
	  </view>
	  
      <!-- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view> -->
      <view class="action-btn">
        <button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
  import { getCodeImg, register } from '@/api/login'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        registerForm: {
				username: "",
				password: "",
				id_card:"",
				email:"",
				mobile:"",
        },
		 
		 idCardRegex: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)$/,
		mobileRegex: /^1[3-9]\d{9}$/
      }
    },
    created() {
      // this.getCode()
    },
    methods: {
      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login`)
      },
      // 获取图形验证码
      // getCode() {
      //   getCodeImg().then(res => {
      //     this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
      //     if (this.captchaEnabled) {
      //       this.codeUrl = 'data:image/gif;base64,' + res.img 
      //       this.registerForm.uuid = res.uuid
      //     }
      //   })
      // },
      // 注册方法
       async handleRegister() {
         if (this.registerForm.username === "") {
           this.$modal.msgError("请输入您的账号");
         } else if (this.registerForm.password === "") {
           this.$modal.msgError("请输入您的密码");
         } else if (!this.idCardRegex.test(this.registerForm.id_card)) {
           this.$modal.msgError("请输入正确的身份证号");
         } else if (!this.mobileRegex.test(this.registerForm.mobile)) {
           this.$modal.msgError("请输入正确的手机号码");
         } else {
           this.$modal.loading("注册中，请耐心等待...");
           try {
             await this.register();
           } catch (error) {
             this.$modal.closeLoading();
             if (this.captchaEnabled) {
             }
             this.$modal.msgError("注册失败，请重试或稍后再试");
           }
         }
       },
      // 用户注册
	  
	  
   //    async register() {
		  
   //      register(this.registerForm).then(res => {
			// console.log('2221',this.registerForm)
			// console.log('111',)
   //        this.$modal.closeLoading()
		   
   //        uni.showModal({
   //        	title: "系统提示",
   //        	content: "您的账号 " + this.registerForm.username + res.msg,
			
   //        	success: function (res) {
   //        		if (res.confirm) {
   //              uni.redirectTo({ url: `/pages/login` });
   //        		}
   //        	}
   //        })
   //      }).catch(() => {
			// console.error('注册失败:', error);
			//         this.$modal.closeLoading();
			//         this.$modal.msgError("注册失败，请检查您的输入");

   //        if (this.captchaEnabled) {
   //          // this.getCode()
   //        }
   //      })
   //    },
   
   
   
   
   
   
    async register() {
        // 显示加载中提示
        this.$modal.loading("注册中，请耐心等待...");
    
        try {
          const res = await register(this.registerForm);
          console.log('注册表单数据:', this.registerForm);
          console.log('注册响应:', res);
    
          // 关闭加载中提示
          this.$modal.closeLoading();
    
          // 根据响应消息显示不同的模态框提示
          if (res.msg === "注册成功") {
            // 注册成功
            uni.showModal({
              title: "系统提示",
              content: `您的账号 ${this.registerForm.username} 注册成功！`,
              success: (res) => {
                if (res.confirm) {
                  // 用户点击了确定按钮，跳转到登录页面
                  uni.redirectTo({ url: `/pages/login` });
                }
              }
            });
          } else if (res.msg === "用户名已存在") {
            // 用户名已存在
            uni.showModal({
              title: "系统提示",
              content: `您的账号 ${this.registerForm.username} 已存在，请重新输入！`,
              showCancel: false,
              confirmText: "重新输入",
              success: (res) => {
                if (res.confirm) {
                  // 用户点击了重新输入按钮，清空用户名和密码
                  this.registerForm.username = '';
                  this.registerForm.password = '';
                }
              }
            });
          } else {
            // 其他错误
            this.$modal.msgError(`注册失败：${res.msg}`);
          }
        } catch (error) {
          console.error('注册失败:', error);
          this.$modal.closeLoading();
          this.$modal.msgError("注册失败，请检查您的输入");
    
          if (this.captchaEnabled) {
            // 如果启用了验证码，可以在这里重新获取验证码
            // this.getCode()
          }
        }
      
     },
      // 注册成功后，处理函数
      registerSuccess(result) {
        // 设置用户信息
		this.$tab.reLaunch('/pages/index')

      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
